<template>
  <div>
    <ul class="message-list">
      <li
        v-for="(chatItem, index) in chatList"
        :key="'chat_' + index"
        :class="{'is-top': chatItem.isTop, 'current-chat': activedChat == chatItem.id }"
        @click="handleChat(chatItem.id)"
      >
        <div class="friend-avatar">
          <el-badge :is-dot="!chatItem.read">
            <div class="block">
              <el-avatar
                shape="square"
                size="medium"
                :src="$utils.getAvatar(chatItem.friendAvatar)"
              ></el-avatar>
            </div>
          </el-badge>
        </div>
        <dl class="friend-message">
          <dt>
            <span class="friend-name text-hide">{{ chatItem.remarks || chatItem.friendName }}</span>
            <span class="time">{{ getLastTime(chatItem.lastTime) }}</span>
          </dt>
          <dd>
            <span
              class="last-message text-hide"
              v-if="chatItem.isGroup"
            >
              {{ getGroupInfo(chatItem) }}
            </span>
            <span
              class="last-message text-hide"
              v-else
            >
              {{ chatItem.lastMessage }}
            </span>
            <span
              class="is-notice"
              v-if="!chatItem.isNotice"
            >
              <icon-svg
                icon-name="mute"
                font-size="16"
              ></icon-svg>
            </span>
          </dd>
        </dl>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import chatData from './ChatData.json'
import Chat from './Chat.vue'

@Component
export default class ChatList extends Vue {
  @Prop() public defaultAvatar!: string
  private chatList: object[] = [] // 消息列表
  private activedChat: string = '' // 当前选中聊天
  private currentDate: string = new Date().Format('yyyy/MM/dd')
  private created() {
    this.chatSort()
  }
  /* Methods */
  private getLastTime(lastTime: string) {
    const isCurrentDay = lastTime.includes(this.currentDate)
    const time = lastTime.split(' ')
    return isCurrentDay ? time[1] : time[0]
  }
  // 处理显示群聊消息
  private getGroupInfo(chat: any) {
    const newMsg = chat.newMsg ? `[${chat.newMsg}条]` : ''
    let lastMessage = ''
    if (chat.messageList.length > 0) {
      const last = chat.messageList[0]
      if (last.tips) {
        lastMessage = last.tipMsg
      } else if (!last.message) {
        lastMessage = `${last.remarks || last.name}: [图片]`
      } else {
        lastMessage = `${last.remarks || last.name}: ${last.message}`
      }
    }
    return newMsg + lastMessage
  }
  // 点击聊天
  private handleChat(id: string) {
    this.activedChat = id
  }
  // 聊天排序
  private chatSort() {
    this.chatList = chatData
      .sort((a: any, b: any) => (new Date(b.lastTime) as any) - (new Date(a.lastTime) as any))
      .sort((a: any, b: any) => b.isTop - a.isTop)
  }
}
</script>

<style lang="scss" scoped>
.message-list {
  height: 100%;
  overflow: auto;
  li {
    padding: 14px 14px 14px 0;
    &.is-top {
      background-color: $is-top;
    }
    &.current-chat {
      background-color: $active;
    }
    .friend-avatar,
    .friend-message,
    .friend-name,
    .time,
    .last-message,
    .is-notice {
      display: inline-block;
      vertical-align: top;
    }
    .friend-avatar {
      width: 36px;
      height: 36px;
      margin: 0 11px;
    }
    .friend-message {
      width: calc(100% - 60px);
      dt {
        font-weight: 600;
        font-size: 14px;
        .friend-name {
          width: calc(100% - 60px);
          font-size: 14px;
          line-height: 1;
        }
        .time {
          width: 60px;
          font-size: 9px;
          font-weight: 400;
          color: $time-color;
          text-align: right;
        }
      }
      .last-message {
        color: $value-text;
        width: calc(100% - 16px);
      }
      .is-notice {
        line-height: 1;
      }
    }
  }
}
</style>
